<template>
  <div>
    <!-- 导航顶部 -->
    <header>
      <div class="top-nav">
        <div class="container">
          <ul>
            <li><a href="#">请先登录</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">会员中心</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">关于我们</a></li>
            <li>
              <a href="#"
                ><i class="el-icon-phone" style="padding: 0 5px 0 0"></i
                >手机版</a
              >
            </li>
          </ul>
        </div>
      </div>
    </header>
    <!-- 导航栏 -->
    <nav>
      <div class="app-nav">
        <div class="container">
          <div class="log">
            <img src="@/assets/image/logo.png" alt="" />
          </div>
          <ul>
            <li><a href="" @click="goHome()">首页</a></li>
            <li v-for="(category, index) in categoryList" :key="category.id">
              <a
                @click="goCategory(category.id)"
                @mouseenter="show(true, index)"
                >{{ category.name }}</a
              >
            </li>
          </ul>
          <div class="search">
            <input type="text" placeholder="搜一搜" />
            <i
              class="el-icon-search"
              style="position: absolute; left: 0; top: 3px"
            ></i>
          </div>
          <div class="shopCart" style="margin: 64px 0 0 0">
            <el-badge :value="12">
              <i class="el-icon-shopping-cart-full" style="font-size: 25px"></i>
            </el-badge>
          </div>
          <!-- 隐藏 -->
          <div class="details" v-if="showDis" @mouseleave="show(false, index)">
            <div class="container">
              <ul>
                <li v-for="child in child" :key="child.id">
                  <img :src="child.picture" alt="" />
                  <p>{{ child.name }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      showDis: false,
      index: 0,
    };
  },
  mounted() {
    this.$store.dispatch("getCategoryList");
  },
  methods: {
    //跳转首页
    goHome() {
      this.$router.push("/home");
    },
    //显示 | 隐藏
    show(type, index) {
      this.showDis = type;
      this.index = index;
    },
    //跳转分类详情页
    goCategory(id) {
      this.$router.push({ name: "category", query: { id } });
    },
  },
  computed: {
    child() {
      return this.categoryList[this.index].children;
    },
    ...mapState({
      categoryList: (state) => state.home.categoryList,
    }),
  },
};
</script>

<style>
.container {
  width: 1240px;
  margin: 0 auto;
}

.top-nav {
  height: 53px;
  background-color: #333333;
  line-height: 53px;
}

.top-nav ul {
  float: right;
  height: 53px;
}

.top-nav ul li {
  float: left;
}

.top-nav ul li a {
  padding: 0 15px;
  color: #cdcdcd;
  border-right: 1px solid gray;
}

.top-nav ul li a:hover {
  color: #27ba9b;
}

.top-nav ul li:last-child a {
  border: 0;
}

.app-nav {
  height: 132px;
  background-color: #ffffff;
}

.app-nav .container {
  position: relative;
  display: flex;
}

.app-nav .log {
  width: 200px;
  height: 132px;
  line-height: 132px;
}

.app-nav .log img {
  width: 100%;
}

.app-nav ul {
  width: 820px;
  height: 32px;
  float: right;
  margin-top: 64px;
}

.app-nav ul li {
  padding: 0 0 0 45px;
  float: left;
  font-size: 16px;
}

.app-nav ul li a:hover {
  color: #27ba9b;
  padding-bottom: 4px;
  border-bottom: 1px solid #27ba9b;
}

.app-nav .search {
  position: relative;
  margin-top: 64px;
}

.app-nav .search input {
  width: 95%;
  padding: 0 0 5px 20px;
  border-bottom: 1px solid #eee;
}

.details {
  position: absolute;
  top: 85%;
  left: 0;
  height: 130px;
  background-color: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.details ul {
  width: 100%;
  margin: 0;
  height: 100px;
  line-height: 50px;
}

.details ul li {
  width: 150px;
  height: 50px;
  float: left;
  text-align: center;
}

.details ul li img {
  width: 50%;
}
.details ul li p {
  white-space: nowrap;
}
.details ul li p:hover {
  cursor: pointer;
  color: #27ba9b;
}
</style>